<template>
  <van-tabbar
    v-model="active"
    :placeholder="true"
    :route="true"
    fixed
    active-color="#ff3040"
  >
    <van-tabbar-item
      v-for="(item, index) in tabBarData"
      :key="index"
      :to="item.to"
    >
      <template #icon="props">
        <svg-icon :name="item.icon" :class="props.active ? 'active-tab' : ''" />
      </template>
      {{ item.title }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

const active = ref(0);
const tabBarData = reactive([
  {
    icon: "home",
    title: "首页",
    to: {
      name: "Home"
    }
  },
  // {
  //   icon: "visit",
  //   title: "拜访记录",
  //   to: {
  //     name: "VisitRecords"
  //   }
  // },
  {
    icon: "industry",
    title: "行业报告",
    to: {
      name: "IndustryReport"
    }
  },
  {
    icon: "calendar",
    title: "共享日历",
    to: {
      name: "SharedCalendar"
    }
  }
]);
</script>

<style scoped>
.active-tab {
  --svg-active-color: #ff3040;
}
</style>
